<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Google App EngineのChannel APIを使ったサンプル</title>
<style type="text/css">
body, h1, h2, p {margin:0;padding:0}
html, body {height:100%}
body {color:#333;background:#BEC3C6}
h1 {font-size:120%;margin-bottom:20px}
h2 {font-size:100%;margin-top:20px}
p {font-size:85%;margin-top:0.5em}
#container {width:980px;height:auto;min-height:100%;margin:0 auto;background:#FFFFFF}
#content {padding:20px;}
#message {width:250px;margin-right:10px}
</style>
<script type="text/javascript" src="{{script}}"></script>
<script type="text/javascript">
if(typeof window.console!='object'){window.console={log:function(){},debug:function(){},info:function(){},warn:function(){},error:function(){},assert:function(){},dir:function(){},dirxml:function(){},trace:function(){},group:function(){},groupEnd:function(){},time:function(){},timeEnd:function(){},profile:function(){},profileEnd:function(){},count:function(){}};}
</script>
<script type="text/javascript">
<!--
(function(){
var token;
var client_id;
var socket=null;
var channel=null;
window.onload=function(){
	document.sendForm.sendButton.disabled=true;
	document.loginForm.onsubmit=login;
	document.sendForm.onsubmit=send;
}
/**
 * ソケット通信のログイン
 * @param	event
 */
function login(event){
	if(socket!=null){
		//ソケット通信切断
		socket.channelId_=null;
		socket.close();
		socket=null;
		//document.sendForm.sendButton.disabled=true;
		return false;
	}
	
	var url=event.target.action;
	var http=new XMLHttpRequest();
	http.open('GET',url,true);
	http.onreadystatechange=function(){
		//4で受信完了
		if (http.readyState==4){
			console.group('login');
			try{
				var json=eval('('+http.responseText+')');
				console.log(json);
				token=String(json.token);
				client_id=String(json.client_id);
				if(json.users){
					document.getElementById('users_num').innerHTML=String(json.users.length);
				}
				initialize();
			}catch(err){
				console.error(err);
				console.log(http.responseText);
			}
			console.groupEnd();
		}
	}
	http.send();
	return false;
}

/**
 * ソケット通信の準備をする
 */
function initialize(){
	channel=new goog.appengine.Channel(token);
	socket=channel.open({
		onopen:function(){
			//ソケットopen完了時(受信可となったタイミング)にコールされる処理
			console.log('onopen');
			//document.sendForm.sendButton.disabled=false;
			output('接続が完了しました。');
			document.loginForm.loginButton.value="接続を切断";
		},
		onmessage:receive,
		onerror:function(error){
			//エラー時に発生するイベント
			console.error('onerror');
		},
		onclose:function(){
			console.log('onclose');
			output('接続を閉じました。');
			document.loginForm.loginButton.value="接続開始";
		}
	});
}

/**
 * 新しいメッセージを送信する
 * @param	event
 */
function send(event){
	if(document.sendForm.sendButton.disabled)return false;
	var value=document.getElementById('message').value;
	if(value==""){
		alert("メッセージを入力してください");
		return false;
	}
	document.getElementById('message').value="";
	document.sendForm.sendButton.disabled=true;
	var url=event.target.action;
	var params='value='+encodeURIComponent(value)+'&client_id='+client_id;
	var path=url+'?time='+(new Date().getTime());
	var http=new XMLHttpRequest();
	http.open('POST',path,true);
	//Tokenの受信時に呼ばれる関数
	http.onreadystatechange=function(){
		//4で受信完了
		if (http.readyState==4){
			//document.sendForm.sendButton.disabled=false;
		}
	}
	http.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=UTF-8");
	http.send(params);
	return false;
}
/**
 * 新しいメッセージを受け取ったときに発生するイベント
 * @param	event
 */
function receive(event){
	console.group('onmessage');
	var json=null;
	try{
		json=eval('('+event.data+')');
	}catch(err){
		console.error(err);
		console.log(event.data);
	}
	if(json!=null){
		if(json.message){
			var msg=json.message;
			console.log('message');
			console.log(msg);
			output(msg);
		}else if(json.users){
			var users=json.users;
			console.log('users');
			console.log(users);
			document.getElementById('users_num').innerHTML=String(users.length);
		}
	}
	console.groupEnd();
}
/**
 * テキストフィールドへ出力する
 * @param data
 */
function output(data){
	var value='';
	if(typeof(data)=='string'){
		value=data;
	}else if(typeof(data)=='object'){
		if(data.ip){
			value+='['+String(data.ip)+'] ';
		}
		value+=decodeURIComponent(String(data.value));
		if(data.datetime!==undefined){
			var date=/^([0-9]{4})-([0-9]{2})-([0-9]{2})\s([0-9]{2}):([0-9]{2}):([0-9]{2}).[0-9]+(\+[0-9]{2}:[0-9]{2})?$/.exec(data.datetime);
			if(date!==null){
				value+=' ('+date[2]+'/'+date[3]+' '+date[4]+':'+date[5]+')';
			}
		}
	}
	var txt=document.getElementById("output");
	txt.innerHTML=(txt.innerHTML.length>0)?txt.innerHTML+"\n"+value:value;
	txt.scrollTop=txt.scrollHeight;
}
})();
-->
</script>
</head>
<body>
<div id="container">
<div id="content">
<h1>タイムセール（サンプル）</h1>
<form action="login" method="GET" name="loginForm">
<input type="submit" name="loginButton" value="接続開始">
</form>
<p class="ip">IP : {{ip}}</p>
<div style="display:none">
<p class="users">ユーザ数 : <span id="users_num"></span></p>
<h2>送信</h2>
<form action="post" method="POST" name="sendForm">
<input id="message" type="text" name="message" maxlength="140" value="" />
<input type="submit" name="sendButton" value="データを送信">
</form>
</div>
<h2>出力</h2>
<textarea name="output" id="output" cols=80 rows=20 readonly></textarea>
</div>
</div>
</body>
</html>
